/**
 * @File   : Exam.js
 * @Author : xue.xiaoBing
 * @Date   : 2021/4/21
 * @Desc   : 考试模块
 **/

import PropTypes from "prop-types";
import {connect} from "react-redux";
import React, {Component} from "react";
import {NavLink} from "react-router-dom";
import {Row, Col, Button, Space, List, Avatar, Divider} from "antd/lib/index";

import {changeNavbar} from "src/api/request";
import TestImg from "src/assets/images/2.jpg";
import HomeHeader from "src/components/head/homeHeader/HomeHeader";


class Exam extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  handleClick = data => {
   this.props.changeNavbar(data.key)
  };

  render() {
    const data = [
      {
        title: '初一代数问题',
      },
      {
        title: '初二集合问题',
      },
      {
        title: '高中排列组合求解',
      },
    ];
    return (
      <div>
        <div>
          <HomeHeader/>
        </div>
        <div>
          <Row style={{margin: '20px 10%'}} justify={'spacing-around'}>
            <Col span={17}>
              <Row>
                <Button type={'primary'}>公开测试</Button>
              </Row>
              <Row gutter={[16, 16]} style={{marginTop: '10px'}}>
                <Col span={8}>
                  <NavLink to={'/exam/1/1'} onClick={this.handleClick.bind(this,{'key':null})}>
                    <div style={{height: '126px'}}>
                      <img src={TestImg} alt=""
                           style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>
                    </div>
                  </NavLink>
                </Col>
                <Col span={8}>
                  <div style={{height: '126px'}}>
                    <img src={TestImg} alt=""
                         style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>
                  </div>
                </Col>
                <Col span={8}>
                  <div style={{height: '126px'}}>
                    <img src={TestImg} alt=""
                         style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                  </div>
                </Col>
                <Col span={8}>
                  <div style={{height: '126px'}}>
                    <img src={TestImg} alt=""
                         style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                  </div>
                </Col>
                <Col span={8}>
                  <div style={{height: '126px'}}>
                    <img src={TestImg} alt=""
                         style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                  </div>
                </Col>
              </Row>
              <Divider/>
              <Row>
                <Button type={'primary'}>我的考试</Button>
              </Row>
              <Row gutter={[16, 16]} style={{marginTop: '10px'}}>
                <Col span={8}>
                  <div style={{height: '126px'}}>
                    <img src={TestImg} alt=""
                         style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>
                  </div>
                </Col>
                <Col span={8}>
                  <div style={{height: '126px'}}>
                    <img src={TestImg} alt=""
                         style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                  </div>
                </Col>
                <Col span={8}>
                  <div style={{height: '126px'}}>
                    <img src={TestImg} alt=""
                         style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                  </div>
                </Col>
              </Row>
            </Col>
            <Col span={6} offset={1}>
              <Space>
                <Button type={'primary'}>最新</Button>
                <Button type={'primary'}>最热</Button>
                <Button type={'primary'}>推荐</Button>
              </Space>
              <Divider style={{margin: '20px 0 10px'}}/>
              <List
                style={{width: '100%'}}
                itemLayout="horizontal"
                dataSource={data}
                renderItem={item => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={<Avatar src={TestImg}/>}
                      title={<a href="https://ant.design">{item.title}</a>}
                    />
                  </List.Item>
                )}
              />
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}

Exam.propTypes = {
  changeNavbar: PropTypes.func,
};
export default connect(
  state => ({
    navbarMenu: state.uiState.navbarMenu
  }),
  {changeNavbar}
)(Exam)